<template>
  <div class="components-dropdown-demo-placement">
    <a-dropdown :getPopupContainer="t => t?.parentElement">
      <div
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;
        "
      >
        <iconfont name="#icon-quanshitu" style="font-size: 24px" />
        <div style="display: flex">
          <div>视角</div>
          <div><down-outlined /></div>
        </div>
      </div>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer"
              @click="onChange('iso')"
            >
              <iconfont name="#icon-quanshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">Iso View</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer"
              @click="onChange('front')"
            >
              <iconfont name="#icon-zhengshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">Front View</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer"
              @click="onChange('back')"
            >
              <iconfont name="#icon-houshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">Back View</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer"
              @click="onChange('left')"
            >
              <iconfont name="#icon-zuoshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">Left View</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer"
              @click="onChange('right')"
            >
              <iconfont name="#icon-youshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">Right View</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer"
              @click="onChange('top')"
            >
              <iconfont name="#icon-fushitu" style="font-size: 24px" />
              <div style="margin-left: 10px">Top View</div>
            </div>
          </a-menu-item>
          <a-menu-item>
            <div
              style="display: flex; cursor: pointer"
              @click="onChange('bottom')"
            >
              <iconfont name="#icon-yangshitu" style="font-size: 24px" />
              <div style="margin-left: 10px">Bottom View</div>
            </div>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>
<script setup>
import { DownOutlined } from '@ant-design/icons-vue'
import iconfont from '@/components/iconfont.vue'

let emit = defineEmits(['change'])

function onChange(type) {
  emit('change', type)
}
</script>
<style scoped>
.components-dropdown-demo-placement .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>
